<template>
    <table id="items" cellspacing="1" style="width: 100%;height: 100px;border: 1px solid #a8aeb2;">
        <tr class="tr">
            <th class="thc">序号</th>
            <th class="tha">实验项目</th>
            <th class="thb">标准规定指标</th>
            <th class="thb">检测结果</th>
            <th class="thd">单项判定</th>
            <th class="the">检验方法</th>
        </tr>
        <tr class="tr" v-for="(item, index) in labEntrustItemsList" :key="index">
            <th class="thc">{{ index + 1 }}</th>
            <td class="tha">
                {{ item.itemName }}
            </td>
            <td class="thb">
                <a-textarea v-model:value="item.basisNorm" size="large" class="input"/>
            </td>
            <td class="thb">
                <a-textarea v-model:value="item.itemResult" size="large" class="input"/>
            </td>
            <td class="thd">
                <!-- <a-input v-model:value="item.itemDecide" size="large" class="input"/> -->
                <a-select v-model:value="item.itemDecide" :dropdown-match-select-width="false" size="large" class="input">
                    <a-select-option value="合格">合格</a-select-option>
                    <a-select-option value="不合格">不合格</a-select-option>
                </a-select>
            </td>
            <td class="the">
                {{ item.basisNum }}
            </td>
        </tr>
    </table>
</template>
  
<script lang="ts" setup>
import { defineProps, defineExpose } from 'vue';

const props = defineProps<{
    labEntrustItemsList: [{
        id: string,
        taskId: string,
        itemId: string,
        itemName: string,
        basisNorm: string,
        itemResult: string,
        itemDecide: string,
        basisNum: string,
    }]
}>();


defineExpose({
    props,
});


</script>
  
<style scoped>
.div {
    height: 45px;
    border: 1px solid #a8aeb2;
    background-color: #d2d5d6;
    text-align: left;
    font: 1.1em sans-serif;
    line-height: 45px
}

.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}
.tha {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}
.thb {
    width: 25%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}
.thc {
    width: 5%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}
.thd {
    width: 12%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}
.the {
    width: 13%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}


.input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
    font: 1em sans-serif;
}
</style>